//-
    Match with Design Guide status:

        [ ] 1. Example implementation
        [ ] 2. Simple variable
        [ ] 3. Unbound instances
        [ ] 4. Bound instances and/or live feed
        [ ] 5. {{#if }} ... {{/if}} block
        [ ] 6. Test on mobile
        [ ] 7. Change sizes
        [ ] 8. Match theme

anchor csv-importer
.ui.segments
    h3.ui.top.attached.block.header csv-importer #[a(href="#csv-importer") #[i.linkify.icon]]
    .ui.attached.segment
        pre csv-importer(on-import="importCsv" csv="\{{ rawCsvContent }}" columns="col1,col2,col3" delimiter=",") #...delimiter="\t"
        p
            code on-import = (ev, content) ->
        ul
            li #[code ev]: #[code ack-button] event
            li #[code content] is response with [{col1:"xx", col2:"xx", col3:"xx"}, {col1:"xx", col2:"xx", col3:"xx"}, ...]

    .ui.segment
        // a checkbox to toggle one component instance ||meets 5||
        checkbox(checked="{{ csvImporter.show }}") Show/hide Bound component 1
        +if('csvImporter.show')
            h4
            .panel.panel-default
                .panel.panel-heading
                    h3 Import From CSV
                .panel.panel-body
                    csv-importer(on-import="importCsv" csv="{{ csvImporter.testData }}" columns="col1,col2,col3 " delimiter=",") Import-CSV!
    .ui.segment
        h3 Imported CSV
        r-table
            r-head
                r-row
                    r-head-col first column
                    r-head-col second column
                    r-head-col third column
            r-body
                +each('csvContent:i')
                    r-row
                        r-col {{ .col1 }}
                        r-col {{ .col2 }}
                        r-col {{ .col3 }}
